<template>
  <div>
    <div class="aaaa" v-html="html"></div>
    <el-button @click="ceshi">测试1</el-button>
  </div>
</template>

<script>
import Mark from "mark.js";

export default {
  data() {
    return {
      Mark: null,
      Mark1: null,
      html: "1图图1图图11图1_图11_图6(a)",
    };
  },
  mounted() {},
  methods: {
    ceshi() {
      let arr = [
        { name: "图11", className: "himmuc-query1" },
        { name: "图6(a)", className: "himmuc-query1" },
      ].sort((a, b) => b.name.length - a.name.length);
      this.Mark = new Mark(document.querySelector(".aaaa"));
      let options = {
        element: "markImg",
        acrossElements: true,
        exclude: ["markImg"],
      };
      // this.Mark.markRegExp(/图2\b/gim, options);
      arr.forEach((item, index) => {
        // let reg = new RegExp(`${item.name}`, "gim");
        // console.log(reg);
        this.Mark.mark(`${item.name}`, options);
      });
    },

    //     each: function (node) {
    //   console.log(node);
    //   node.addEventListener("mouseenter", (e) => {
    //     let div = document.createElement("div");
    //     let img = document.createElement("img");
    //     let className = node.className;
    //     const regex = /img_\S*/g;
    //     const matches = className.match(regex);
    //     console.log(matches[0]); // 输出：["myClass"]
    //     img.src = "";
    //     img.style.width = "100%";
    //     img.style.height = "100%";
    //     div.className = "dialog";
    //     div.append(img);
    //     node.append(div);
    //     console.log(1111);
    //   });
    //   node.addEventListener("mouseleave", (e) => {
    //     node.removeChild(node.children[0]);
    //   });
    // },
  },
};
</script>

<style scoped>
>>> markImg {
  background-color: red;
}
>>> [class^="img_"] {
  position: relative;
}
>>> .dialog {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  top: 0;
  left: 0;
}
</style>
